<template>
    <div id="user_friend">

      <!--css动画-->
      <!--<transition-->
        <!--:duration="{enter:5000,leave:6000}"-->
        <!--appear-->
        <!--enter-active-class="animated bounce fade-enter-active"-->
        <!--leave-active-class="animated shake fade-leave-active"-->
        <!--appear-active-class="animated bounce "-->
      <!--&gt;-->
        <!--<component :is="type"></component>-->
        <!---->
      <!--</transition>-->

      <!--js动画-->
      <!--<transition-->
        <!--@before-enter="handleBeforeEnter"-->
        <!--@enter="handleEnter"-->
        <!--@after-enter="handleAfter"-->
      <!--&gt;-->
        <!--<otherChild v-show="type=='otherChild'"></otherChild>-->
      <!--</transition>-->

      <!--多个元素的过渡-->
      <!--<transition mode="in-out">-->
        <!--&lt;!&ndash;多个元素的过渡&ndash;&gt;-->
        <!--<div v-if="type=='child'" key="hello">Hello world</div>-->
        <!--<div v-else key="bye">bye world</div>-->
      <!--</transition>-->

      <!--多个组件的过渡-->
      <!--<transition mode="out-in">-->
        <!--<component :is="type"></component>-->
      <!--</transition>-->

      <!--vue中列表的过渡-->
      <!--<div class="list">-->
        <!--<ul>-->
          <!--<transition-group>-->
            <!--<li v-for="(item,index) in list" :key="item.id">{{item.title}}</li>-->
          <!--</transition-group>-->
        <!--</ul>-->
      <!--</div>-->

      <!--使用封装的动画组件-->
      <anim :show="show">
        <div>Learn to uese Anim.</div>
      </anim>

      <div class="btn" @click="clickDiv">标签事件</div>

    </div>
</template>

<script>
  import Velocity from '../assets/js/velocity.min';
  var count=0;
    export default {
      name: "user_friend",
      data(){
        return{
          resData:'',
          type:'child',
          list:[],
          show:'true',
        }
      },
      methods:{
        // handleBeforeEnter:(el)=>{
        //   el.style.opacity=0;
        // },
        // handleEnter:(el,callback)=>{
        //   Velocity(
        //     el,        //执行动画的元素
        //     {opacity:1},  //动画内容
        //     {
        //       duration:1000,  //执行动画时长
        //       complete:callback   //执行动画之后的操作，
        //     }
        //   )
        // },
        // handleAfter:(el)=>{
        //   console.log('动画结束');
        // },
        clickDiv:function () {
          this.show=!this.show;
          // this.type = this.type=='child'?'otherChild':'child'
          // this.list.push({
          //   id:count++,
          //   title:'hello world'
          // })
        }
      },
      mounted(){
        this.$http.get('http://www.gqluck.com/index/index/getList').then(
          response=>{
            console.log(response);
            this.resData=response.body.data.friend;
            console.log(this.resData);
          }
        )
      },
    }
</script>

<style scoped>
  @import "../assets/css/animate.css";
  /*.v-enter,*/
  /*.v-leave-to{*/
    /*opacity: 0;*/
  /*}*/
  /*.v-enter-active,*/
  /*.v-leave-active{*/
    /*transition: opacity 1s;*/
  /*}*/
</style>
